<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="../../template/tagedu.xhtml">
    <ui:define name="title">
        <title><h:outputText value="TAG - Perfil Humano"/></title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" ></meta>
        <f:metadata>
            <f:viewParam name="human" value="#{profile.humanID}"/>
        </f:metadata>
    </ui:define>

    <ui:define name="content">
        <link rel="Stylesheet" type="text/css" href="../../resources/css/main.css"></link>
        <link rel="Stylesheet" type="text/css" href="../../resources/css/profile.css"></link>

        <f:event type="preRenderComponent" listener="#{profile.initialize()}"/>
        <h:outputText styleClass="personName" value="Perfil de #{profile.human.firstName} #{profile.human.lastName}"/>
        <h:form id="profileForm">
            <h:commandLink rendered="#{!profile.changeScreen}" value="Alterar Senha">
                <f:ajax render="profileForm" listener="#{profile.loadChangeScreen()}"/>
            </h:commandLink>
            <h:commandLink rendered="#{profile.changeScreen}" value="Editar Perfil">
                <f:ajax render="profileForm" listener="#{profile.loadChangeScreen()}"/>
            </h:commandLink>
            <p:messages/>
            <p:tabView id="humanTabView">
                <p:tab title="Dados Principais" rendered="#{!profile.changeScreen}">
                    <p:panel>                        
                        <h:panelGrid columns="2">
                            <h:outputLabel for="name" value="Nome:"/>
                            <p:inputText id="name" value="#{profile.human.firstName}" styleClass="name" 
                                         required="true" requiredMessage="'Nome' é obrigatório"/>

                            <h:outputLabel for="lastName" value="Sobrenome:"/>
                            <p:inputText id="lastName" value="#{profile.human.lastName}" styleClass="name" 
                                         required="true" requiredMessage="'Sobrenome' é obrigatório"/>

                            <h:outputLabel for="sex" value="Sexo:"/>
                            <h:selectOneMenu id="sex" value="#{profile.human.sex}">
                                <f:selectItems value="#{profile.sexList}"/>
                            </h:selectOneMenu>

                            <h:outputLabel for="birthday" value="Nascimento:"/>
                            <p:inputMask id="birthday" mask="99/99/9999" value="#{profile.human.birthday.time}" 
                                         required="true" requiredMessage="'Nascimento' é obrigatório">
                                <f:convertDateTime pattern="dd/MM/yyyy"/>
                            </p:inputMask>

                            <h:outputLabel for="nacionality" value="Nacionalidade:"/>
                            <h:selectOneMenu id="nacionality" value="#{profile.nationalityID}">
                                <f:selectItems value="#{profile.nationalityList}"/>
                            </h:selectOneMenu>

                            <h:outputLabel for="ethnicity" value="Etnia:"/>
                            <h:selectOneMenu id="ethnicity" value="#{profile.ethnicityID}">
                                <f:selectItems value="#{profile.ethnicityList}"/>
                            </h:selectOneMenu>

                            <h:outputLabel for="phone" value="Telefone Fixo:"/>
                            <p:inputMask id="phone" mask="(99)9999-9999" value="#{profile.human.phone}"/>

                            <h:outputLabel for="celphone" value="Celular:"/>
                            <p:inputMask id="celphone" mask="(99)9999-9999" value="#{profile.human.celphone}"/>

                            <h:outputLabel for="email" value="Email:"/>
                            <p:inputText id="email" value="#{profile.human.email}"/>

                            <h:outputLabel for="laterality" value="Lateralidade:"/>
                            <h:selectOneMenu id="laterality" value="#{profile.human.laterality}">
                                <f:selectItems value="#{profile.lateralityList}"/>
                            </h:selectOneMenu>

                            <h:outputLabel for="maritalStatus" value="Estado Civil:"/>
                            <h:selectOneMenu id="maritalStatus" value="#{profile.human.maritalStatus}">
                                <f:selectItems value="#{profile.maritalStatusList}"/>
                            </h:selectOneMenu>

                        </h:panelGrid>
                    </p:panel>
                </p:tab>
                <p:tab title="Endereço" rendered="#{!profile.changeScreen}">
                    <p:panel id="address" styleClass="addressPanel">
                        <p:message for="cep"/>
                        <h:outputLabel value="CEP" for="cep"/>
                        <p:inputMask id="cep" value="#{profile.cep}" mask="99999999" required="true" requiredMessage="'CEP' é obrigatório"/>
                        <p:commandButton value="Buscar" ajax="true" action="#{profile.searchCEP()}" update="address" process="@this, cep"/>
                        <br/>
                        <h:panelGroup id="zipcode">
                            <h:outputLabel value="Estado:" for="state"/>
                            <p:inputText id="state" value="#{profile.zipcode.city.state.name}" required="true" readonly="true"/>
                            <br/>
                            <h:outputLabel value="Cidade:" for="city"/>
                            <p:inputText id="city" value="#{profile.zipcode.city.name}" required="true" readonly="true"/>
                            <br/><br/>
                        </h:panelGroup>
                        <h:panelGroup rendered="#{profile.showAddress}">
                            <h:outputLabel value="Bairro:" for="neighborhood"/>
                            <p:autoComplete id="neighborhood" value="#{profile.neighborhood}" 
                                            completeMethod="#{profile.neighborhoodComplete}" 
                                            required="true" requiredMessage="'Bairro' é campo obrigatório"
                                            queryDelay="2000" minQueryLength="3"/>
                            <br/>
                            <h:outputLabel value="Logradouro:" for="street"/>
                            <p:autoComplete id="street" value="#{profile.street}" 
                                            completeMethod="#{profile.streetComplete}" 
                                            required="true" requiredMessage="'Logradouro' é campo obrigatório"
                                            queryDelay="2000" minQueryLength="3"/>
                            <br/><br/>
                            <h:outputLabel value="Número:" for="number"/>
                            <p:inputText id="number" value="#{profile.address.number}"/>
                            <br/>
                            <h:outputLabel value="Complemento" for="complement"/>
                            <p:inputText id="complement" value="#{profile.address.complement}"/>                            
                        </h:panelGroup>
                    </p:panel>
                </p:tab>
                <p:tab rendered="#{not empty profile.additionalInfoList and !profile.changeScreen}" title="Dados Específicos">
                    <p:panel>
                        <ui:repeat value="#{profile.additionalInfoList}" var="additionalInfo">
                            <h:panelGrid columns="2">
                                <h:outputText value="#{additionalInfo.additionalInfoType.acronym}:"/>
                                <p:inputMask mask="#{additionalInfo.additionalInfoType.mask}" 
                                             value="#{additionalInfo.value}" 
                                             required="#{additionalInfo.additionalInfoType.compulsory}"
                                             requiredMessage="'#{additionalInfo.additionalInfoType.acronym}' é obrigatório"/>
                            </h:panelGrid>
                        </ui:repeat>
                    </p:panel>
                </p:tab>
                <p:tab title="Filiação" rendered="#{!profile.changeScreen}">
                    <h:panelGroup id="filiation">
                        <p:panel header="Pai" style="height: 100px">
                            <p:commandLink value="Buscar" ajax="true"
                                           process="@this"
                                           onstart="statusDialog.show();" 
                                           oncomplete="statusDialog.hide(); searchHuman.show();" 
                                           action="#{profile.prepareFatherSearch()}"
                                           update=":searchHumanDialog"/>
                            <br/>
                            <p:commandLink value="Cadastrar" ajax="true"
                                           process="@this"
                                           onstart="statusDialog.show();" 
                                           oncomplete="statusDialog.hide(); addHuman.show();" 
                                           action="#{profile.prepareNewMale()}"
                                           update=":addHumanDialog"/>
                            <br/><br/>
                            <h:outputLabel value="Nome: "/>
                            <h:outputText rendered="#{profile.human.father != null}" 
                                          value="#{profile.human.father.name}"/>
                        </p:panel>
                        <p:panel header="Mãe" style="height: 100px">
                            <p:commandLink value="Buscar" ajax="true"
                                           process="@this"
                                           onstart="statusDialog.show();" 
                                           oncomplete="statusDialog.hide(); searchHuman.show();" 
                                           action="#{profile.prepareMotherSearch()}"
                                           update=":searchHumanDialog"/>
                            <br/>
                            <p:commandLink value="Cadastrar" ajax="true"
                                           process="@this"
                                           onstart="statusDialog.show();" 
                                           oncomplete="statusDialog.hide(); addHuman.show();" 
                                           action="#{profile.prepareNewFemale()}"
                                           update=":addHumanDialog"/>
                            <br/><br/>
                            <h:outputLabel value="Nome: "/>
                            <h:outputText rendered="#{profile.human.mother != null}"
                                          value="#{profile.human.mother.name}"/>
                        </p:panel>
                        <p:panel header="Responsável" style="height: 100px">
                            <p:commandLink value="Buscar" ajax="true"
                                           process="@this"
                                           onstart="statusDialog.show();" 
                                           oncomplete="statusDialog.hide(); searchHuman.show();" 
                                           action="#{profile.prepareSponsorSearch()}"
                                           update=":searchHumanDialog"/>
                            <br/>
                            <p:commandLink value="Cadastrar" ajax="true"
                                           process="@this"
                                           onstart="statusDialog.show();" 
                                           oncomplete="statusDialog.hide(); addHuman.show();" 
                                           action="#{profile.prepareNewHuman()}"
                                           update=":addHumanDialog"/>
                            <br/><br/>
                            <h:outputLabel value="Nome: "/>
                            <h:outputText rendered="#{profile.human.sponsor != null}"
                                          value="#{profile.human.sponsor.name}"/>
                        </p:panel>
                    </h:panelGroup>
                </p:tab>
                <p:tab title="Conta" rendered="#{profile.changeScreen}">
                    <p:panel>                        
                        <h:panelGrid id="accountPanel" columns="2">    
                            <h:outputLabel for="userName" value="Nome do usuário:"/>
                            <h:outputLabel id="userName" value="#{profile.login.userName}"/>
                            <h:outputLabel for="currentPassword" value="Senha Atual:"/>
                            <p:password id="currentPassword" value="#{profile.currentPassword}" feedback="false" 
                                        required="#{profile.changeScreen}" requiredMessage="'Senha Atual' é obrigatório"/>

                            <h:outputLabel for="newPassword" value="Nova Senha:"/>
                            <p:password id="newPassword" value="#{profile.newPassword}" feedback="false" 
                                        required="#{profile.changeScreen}" requiredMessage="'Nova Senha' é obrigatório"/>

                        </h:panelGrid>
                        <p:commandButton value="Alterar Senha" process="@this, currentPassword, newPassword"
                                         update="@form" ajax="true" action="#{profile.changePassword()}"/>
                    </p:panel>
                </p:tab>
            </p:tabView>
            <p:commandButton rendered="#{!profile.changeScreen}" value="Editar" process="@form"
                             onstart="statusDialog.show();"
                             oncomplete="statusDialog.hide();"
                             update="@form" action="#{profile.edit()}" ajax="true"/>
        </h:form>
    </ui:define>

    <ui:define name="modals">      

        <p:dialog modal="true" widgetVar="statusDialog" 
                  draggable="false" closable="false">
            <p:graphicImage value="../../resources/images/ajax/ajaxloader.gif"/>
        </p:dialog>


        <p:dialog id="searchHumanDialog" position="top" modal="true" 
                  widgetVar="searchHuman" closable="true" 
                  resizable="false" width="1000" height="500">
            <h:form>
                <p:dataTable value="#{profile.humanList}" var="human" paginator="true" rows="10"
                             paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                             rowsPerPageTemplate="10,25,50"
                             selection="#{profile.genericHuman}" rowKey="#{human.id}">
                    <p:column selectionMode="single" />
                    <p:column rendered="false">
                        <h:outputText value="#{human.id}"/>
                    </p:column>
                    <p:column>
                        <p:rowToggler/>
                    </p:column>

                    <p:column filterMatchMode="contains" filterStyle="width: 200px" 
                              filterBy="#{human.name}">
                        <f:facet name="header">
                            <h:outputText value="Nome"/>
                        </f:facet>
                        <h:outputText value="#{human.name}"/>
                    </p:column>
                    <p:rowExpansion>
                        <h:panelGrid columns="2" cellpadding="4">
                            <h:outputLabel value="Nascimento: " for="birthday"/>
                            <h:outputText value="#{human.birthday.time}" id="birthday">
                                <f:convertDateTime pattern="dd/MM/yyyy"/>
                            </h:outputText>
                            <h:outputLabel value="Endereço: " for="address"/>
                            <h:outputText value="#{human.address.street.name}, #{humanaddress.number}.
                                          #{human.address.complement}. #{human.address.zipcode.city.name}/#{human.address.zipcode.city.state.name}" id="address"/>
                            <ui:repeat value="#{profile.personAdditionalInfo(human.id)}" var="addInfo">
                                <h:outputLabel value="#{addInfo.additionalInfoType.acronym}: "/>
                                <h:outputText value="#{addInfo.value}"/>
                            </ui:repeat>
                        </h:panelGrid>
                    </p:rowExpansion>
                </p:dataTable>
                <p:commandButton value="OK" onstart="statusDialog.show();" 
                                 oncomplete="statusDialog.hide(); searchHuman.hide();"
                                 ajax="true" process="@form" 
                                 action="#{profile.configureFatherMotherSponsor()}" 
                                 update=":profileForm:humanTabView:filiation"/>
                <p:commandButton value="Cancelar" onclick="searchHuman.hide();"/>
            </h:form>
        </p:dialog>


        <p:dialog id="addHumanDialog" position="top" modal="true" 
                  widgetVar="addHuman" closable="true" resizable="true" 
                  width="1000" height="500">
            <h:form id="addHumanForm">
                <p:messages/>
                <p:tabView id="addHumanView">
                    <p:tab title="Dados Principais">
                        <p:panel styleClass="mainInfoTab">
                            <h:panelGrid columns="2">
                                <h:outputLabel for="humanName" value="Nome*:"/>
                                <p:inputText id="humanName" value="#{profile.humanRegister.firstName}"
                                             required="true" requiredMessage="'Nome' é obrigatório"/>
                                <h:outputLabel for="humanLastName" value="Sobrenome*:"/>
                                <p:inputText id="humanLastName" value="#{profile.humanRegister.lastName}"
                                             required="true" requiredMessage="'Sobrenome' é obrigatório"/>
                                <h:outputLabel for="humanSex" value="Sexo*:"/>
                                <h:selectOneMenu id="humanSex" value="#{profile.humanRegister.sex}">
                                    <f:selectItems value="#{profile.sexListRegister}"/>
                                </h:selectOneMenu>
                                <h:outputLabel for="humanBirthday" value="Nascimento*:"/>
                                <p:inputMask id="humanBirthday" mask="99/99/9999" value="#{profile.humanRegister.birthday.time}"
                                             required="true" requiredMessage="'Nascimento' é obrigatório">
                                    <f:convertDateTime pattern="dd/MM/yyyy"/>
                                </p:inputMask>
                                <h:outputLabel for="humanNacionality" value="Nacionalidade:"/>
                                <h:selectOneMenu id="humanNacionality" value="#{profile.nationalityIDRegister}">
                                    <f:selectItems value="#{profile.nationalityList}"/>
                                </h:selectOneMenu>
                                <h:outputLabel for="humanEthnicity" value="Etnia:"/>
                                <h:selectOneMenu id="humanEthnicity" value="#{profile.ethnicityIDRegister}">
                                    <f:selectItems value="#{profile.ethnicityList}"/>
                                </h:selectOneMenu>
                                <h:outputLabel for="humanPhone" value="Telefone Fixo:"/>
                                <p:inputMask id="humanPhone" mask="(99)9999-9999" value="#{profile.humanRegister.phone}"/>
                                <h:outputLabel for="humanCelphone" value="Celular:"/>
                                <p:inputMask id="humanCelphone" mask="(99)9999-9999" value="#{profile.humanRegister.celphone}"/>
                                <h:outputLabel for="humanEmail" value="Email:"/>
                                <p:inputText id="humanEmail" value="#{profile.humanRegister.email}"/>
                                <h:outputLabel for="humanLaterality" value="Lateralidade:"/>
                                <h:selectOneMenu id="humanLaterality" value="#{profile.humanRegister.laterality}">
                                    <f:selectItems value="#{profile.lateralityList}"/>
                                </h:selectOneMenu>
                                <h:outputLabel for="humanMaritalStatus" value="Estado Civil:"/>
                                <h:selectOneMenu id="humanMaritalStatus" value="#{profile.humanRegister.maritalStatus}">
                                    <f:selectItems value="#{profile.maritalStatusList}"/>
                                </h:selectOneMenu>                
                            </h:panelGrid>
                        </p:panel>
                    </p:tab>
                    <p:tab title="Endereço">
                        <p:panel id="address" styleClass="addressPanel">
                            <p:message for="cep"/>
                            <h:outputLabel value="CEP*" for="cep"/>
                            <p:inputMask id="cep" value="#{profile.cepRegister}" mask="99999999" required="true" requiredMessage="'CEP' é obrigatório"/>
                            <h:commandButton value="Buscar">
                                <f:ajax execute="cep" render="address" listener="#{profile.searchCEPRegister()}"/>
                            </h:commandButton>
                            <br/>
                            <h:panelGroup id="zipcode">
                                <h:outputLabel value="Estado*:" for="state"/>
                                <p:inputText id="state" value="#{profile.zipcodeRegister.city.state.name}" required="true" readonly="true"/>
                                <br/>
                                <h:outputLabel value="Cidade*:" for="city"/>
                                <p:inputText id="city" value="#{profile.zipcodeRegister.city.name}" required="true" readonly="true"/>
                                <br/><br/>
                            </h:panelGroup>
                            <h:panelGroup rendered="#{profile.showAddressRegister}">
                                <h:outputLabel value="Bairro*:" for="neighborhood"/>
                                <p:autoComplete id="neighborhood" value="#{profile.neighborhoodRegister}" 
                                                completeMethod="#{profile.neighborhoodCompleteRegister}" 
                                                required="true" requiredMessage="'Bairro' é campo obrigatório"
                                                minQueryLength="3"/>
                                <br/>
                                <h:outputLabel value="Logradouro*:" for="street"/>
                                <p:autoComplete id="street" value="#{profile.streetRegister}" 
                                                completeMethod="#{profile.streetCompleteRegister}" 
                                                required="true" requiredMessage="'Logradouro' é campo obrigatório"
                                                minQueryLength="3"/>
                                <br/><br/>
                                <h:outputLabel value="Número:" for="number"/>
                                <p:inputText id="number" value="#{profile.addressRegister.number}"/>
                                <br/>
                                <h:outputLabel value="Complemento" for="complement"/>
                                <p:inputText id="complement" value="#{profile.addressRegister.complement}"/>                            
                            </h:panelGroup>
                        </p:panel>
                    </p:tab>    
                    <p:tab title="Dados Específicos">
                        <p:panel>
                            <h:panelGrid columns="2" id="addInfoPanel">
                                <h:selectOneMenu id="addInfoTypes" value="#{profile.addInfoTypeIDRegister}">
                                    <f:selectItems value="#{profile.additionalInfoTypeListRegister}"/>
                                    <f:ajax execute="addInfoTypes" render="addInfoPanel" listener="#{profile.loadMask(profile.addInfoTypeIDRegister)}"/>
                                </h:selectOneMenu>
                                <p:inputMask mask="#{profile.mask}" value="#{profile.additionalInfoRegister}"/>
                            </h:panelGrid>
                        </p:panel>
                    </p:tab>                 
                </p:tabView>
                <p:commandButton value="OK" onstart="statusDialog.show();"
                                 oncomplete="statusDialog.hide(); handleSubmitRequest(xhr, status, args)"
                                 ajax="true" process="@form" 
                                 action="#{profile.createNewHuman()}" 
                                 update=":profileForm:humanTabView:filiation @form"/>
                <p:commandButton value="Cancelar" onclick="addHuman.hide();"/>
            </h:form> 
        </p:dialog>

        <script type="text/javascript">  
            function handleSubmitRequest(xhr, status, args) {  
                if(!args.validationFailed) {                  
                    addHuman.hide();
                }  
            }
        </script>

    </ui:define>
</ui:composition>